<template>
    <div v-for="(item, idx) in list" :key="idx" style="display: inline-block; padding: 0 4px">
      <button v-if="item.type === 'btn'" class="sea-btn-link" size="small"
                 :title="item.title" :class="item.style"
                 @click.stop="props.action(item.evt, row)">
        <i :class="item.icon"></i>&nbsp;{{ item.label }}
      </button>

      <el-divider v-else direction="vertical"></el-divider>
    </div>
</template>

<script setup lang="ts">
import {computed} from 'vue';
import Buttons from "@/view/example/ui/buttons.vue";

/**
 * 按钮元素
 */
interface ButtonItem{
    /**
     * 按钮类型
     */
    type: 'btn'|any,
    /**
     * 事件名称
     */
    evt: string,
    /**
     * 按钮图标
     */
    icon: string,
    /**
     * 按钮标题
     */
    title: string,
    /**
     * 按钮样式，class-name
     */
    style: string,
    /**
     * 按钮文字
     */
    label: string
}

/**
 *
 * 操作栏封装
 *
 * 就是一个特殊的列，操作栏所有按钮由数据驱动产生。
 *
 * 对接后台设计的时候，buttons 数据可能是由后台接口提供。
 */
interface Props {
    /**
     * 行级数据 - 可以是任意对象
     */
    row?: Record<string, unknown>;

    /**
     * 操作栏按钮配置，可以指定为回调函数
     */
    buttons?: ButtonItem[]|((row: Record<string, unknown>) => ButtonItem[]);

    /**
     * 操作栏点击事件
     *
     * @param evt {string} - 时间名称
     * @param row {Record<string, unknown>} - 行级数据
     */
    action: (evt:string, row: Record<string, unknown>) => void;
}

// 在组件中使用
const props = defineProps<Props>();

/**
 * @type [ButtonItem]
 */
const list = computed(() => {
    if(Array.isArray(props.buttons)){
        return props.buttons;
    } else {
        return props.buttons(props.row);
    }
});

</script>
